{% extends "layout.html" %}

{% block title %}foursquare-latitude: Trips{% endblock title %}

{% block head %}
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style type="text/css">

    #map {
      width: 400px;
      height: 400px;
    }

    .tripList {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .activity {
      -moz-border-radius: 8px;
      border: 1px solid gray;
      border-radius: 8px;
      margin-top: 4px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .venue {
      -moz-border-radius: 8px;
      border: 1px solid gray;
      border-radius: 8px;
      margin-top: 4px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .localityList {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .created {
      font-size: xx-small;
    }

    .address {
      font-size: smaller;
    }

    .locality {
      font-size: smaller;
    }

    .opacity_40 {
      opacity: 0.4;
      -moz-opacity: 0.4;
      filter: alpha(opacity=40);
    }

    #itineraryTitle {
      width: 100%;
      height: 1em;
    }

    #itineraryDescription {
      width: 100%;
      min-height: 6em;
    }

    .venue-edit-comment {
      min-height: 4em;
      width: 100%;
    }

  </style>
{% endblock head %}

{% block onload %}fsl.trips.init(){% endblock onload %}

{% block main %}
<table>
  <tr>
    <td width="50%">
      <div id="itineraryMetadata">
	<textarea placeholder="Add a title..." id="itineraryTitle"></textarea>
	<br />
	<textarea placeholder="Write a description..." id="itineraryDescription"></textarea>
      </div>
    </td>
    <td width="50%" valign="top">
      Drag a checkin from the left column to the right column to build a list of places to share. <br />
      You can click on each date to expand it to a list of checkins. <br />
      When finished, click the save button to keep your list.
    </td>
  </tr>
<p />


<table border="1">
  <tr>
    <td id="allTrips" width="500px" style="vertical-align: top">
      <ul id="allTripsList" style="vertical-align: top;" />
    </td>

    <td width="400px" style="vertical-align: top">
      <div id="map" />
    </td>

    <td id="itinerary" width="500px" style="vertical-align: top;">
      <ul id="itineraryList" class="tripList" style="vertical-align: top;" />
    </td>
</table>

<script type="text/javascript">
  var CLOSURE_NO_DEPS = true;
</script>
<script src="/static/js/main.js"></script>

{% endblock main %}

{% block sidebar_content %}
{% endblock sidebar_content %}


{% block bottom_block %}
{% endblock bottom_block %}
